<div class="min-h-screen">
    <div class="h-[100px] w-full"></div>
    <div class="container mx-auto p-6 leading-relaxed mb-11 flex-col flex gap-4" x-data="{
        size: 'base',
        sizeList:['sm', 'base','lg', 'xl','2xl'],
    }">
        <h1 class="text-2xl font-bold text-white text-center">{{$chapter->chapter_title}}</h1>
        <div class="flex justify-end gap-2 text-base cursor-pointer ">
            <div class="text-white">
                字体大小：
            </div>
            <template x-for="font in sizeList">
             <div x-text="font" class="hover:text-violet-700"   :class="size === font ? 'text-violet-700' : 'text-white'" @click="size = font;" ></div>
            </template>
        </div>
        <div class="leading-relaxed max-w-screen-lg mx-auto text-gray-300 border-b border-gray-600 pb-4" :class="'text-'+size">
            {!! $chapter->chapter_content  !!}
        </div>
        <div class="flex flex-col w-full justify-center items-center my-4 gap-3">
            @if($this->nextChapter)
                <a wire:navigate class="bg-gradient-to-r from-violet-300 to-violet-700 rounded-lg text-white px-10 py-4" href="{{route('chapter',['chapter'=>$this->nextChapter])}}">{{$this->nextChapter->chapter_title}}</a>
            @else
                <a class="text-gray-400 border-gray-400 border-b" href="#">没有更多了</a>
            @endif
            @if($this->preChapter)
                <a wire:navigate class="text-gray-400 border-gray-400 border-b" href="{{route('chapter',['chapter'=>$this->preChapter])}}">{{$this->preChapter->chapter_title}}</a>
                @else
                <a class="text-gray-400 border-gray-400 border-b" href="#">没有更多了</a>
            @endif
        </div>
    </div>
</div>
